<template>
  <div style="height:690px" align="center">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">预约记录详情</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">档案号</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">{{data.hMemberofthefile.hFn}}</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">体检人</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">{{data.hMemberofthefile.hName}}</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">性别</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">{{data.hMemberofthefile.hSex}}</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">体检套餐</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">{{data.setmeal.name}}</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">体检时间</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">{{data.orderdate}}</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br><br></div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">套餐详情</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-table
            size="small"
            current-row-key="id"
            :data="dataList"
            stripe
            highlight-current-row>
            <el-table-column
              prop="name"
              label="项目名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="项目内容"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light"><br><br></div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-light" v-if="show" @click="dele(data.id)">取消预约</div>
        <div class="grid-content bg-purple-light" v-if="show1">预约成功</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getById } from "@/api/RReporttoupload";
import { getCheckgroupById } from "@/api/checkgroup";
import { removeTOrder } from "@/api/RReporttoupload";


export default {
  data(){
    return{
      data:{},
      dataList:[],
      show:false,
      show1:false,
    }
  },
  methods:{
    dele(id){
      this.$confirm("是否取消预约？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        removeTOrder(id).then(response => {
          this.$router.push({
            path: '/report',
          })
        }).catch(error => {
          this.outputError(error)                
        })
      }).catch((error) => { });
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  created(){
    getById(sessionStorage.getItem('getID'))
    .then((response) => {
      console.log(response);
      this.data=response.data

      if(response.data.orderstatus=="未到诊"){
        this.show=true
      }
      if(response.data.orderstatus=="已到诊"){
        this.show1=true
      }

      getCheckgroupById(response.data.setmealId)
      .then((response) => {
        console.log(response);
        this.dataList=response.data
      })
      .catch((error) => {
        this.outputError(error);
      });
    })
    .catch((error) => {
      console.log(error);
    });
  }
}
</script>

<style>

</style>